import classNames from "classnames";
import React, { FC, useMemo } from "react";
import styles from "./index.module.less";

interface ProgressProps {
  /** 进度条高度，默认为12px */
  strokeHeight?: number;
  /** 是否显示百分比*/
  showText?: boolean;
  /** 外部样式 */
  style?: React.CSSProperties;

  /** 外部样式 classname */
  className?: string;
  /** 百分比  */
  percent: number;
}

const Progress: FC<ProgressProps> = (props) => {
  const {
    strokeHeight = 25,
    showText = true,
    style,
    className,
    percent,
  } = props;

  const cnames = classNames(styles.bar, className);

  /** 超过时候进行限制*/
  const percentResult = useMemo(() => {
    if (props.percent > 100) {
      return 100;
    } else if (props.percent <= 100) return props.percent;
    else {
      return 0;
    }
  }, [props]);

  return (
    <div className={cnames} style={style}>
      <div
        className={styles.outer}
        style={{
          height: `${strokeHeight}px`,
          borderRadius: `${strokeHeight / 2}px`,
        }}
      >
        <div
          className={styles.inner}
          style={{
            width: `${percentResult}%`,
            borderRadius: `${strokeHeight / 2}px`,
          }}
        >
          {!!showText && <span className={styles.text}>{`${percent}%`}</span>}
        </div>
      </div>
    </div>
  );
};

export default Progress;
